<template>
  <div class="ma-1">
    <v-row no-gutters>
      <v-col cols="3">
        <v-card class="mr-2">
          <v-navigation-drawer permanent>
            <v-list nav dense>
              <v-list-item-group>
                <v-list-item color="success" link class="caption" @click="goTo(goodsCategory.id)" v-for="goodsCategory in goodsCategoryList" :key="goodsCategory.id">
                  {{goodsCategory.name}}
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-navigation-drawer>
        </v-card>
      </v-col>
      <v-col>
        <v-card>
          <v-list>
            <v-list-item-group v-for="goodsCategory in goodsCategoryList" :key="goodsCategory.id">
              <v-subheader :id="'goodsCategory'+goodsCategory.id">{{goodsCategory.name}}</v-subheader>
              <v-list-item v-for="goods in goodsCategory.goodsList" :key="goods.id">
                <v-row no-gutters>
                  <v-col cols="4">
                    <v-img alt="食物图片" :src="goods.image" width="80px" height="80px"/>
                  </v-col>
                  <v-col cols="8">
                    <div>{{goods.name}}</div>
                    <div style="font-size: 10px;color: gray">月售:{{goods.monthlySales}}</div>
                    <v-chip outlined label small>占位符</v-chip>
                    <v-row>
                      <v-col cols="7">
                        <p style="color: crimson">￥{{goods.price/100}}</p>
                      </v-col>
                      <v-col cols="5">
                        <v-btn x-small color="#4caf50" @click="openSpecificationDialog(goods)">详情</v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card>
      </v-col>
    </v-row>

    <v-dialog width="90%" max-width="400px" v-model="dialog">
      <v-card>
        <v-card-title>{{goods.name}}</v-card-title>
        <v-card-text>
          <v-img :src="goods.image" width="120px" height="100px"/>
          <v-subheader>描述:&nbsp;
            <span>{{goods.details}}</span>
          </v-subheader>
          <v-subheader>单价:&nbsp;<span style="color: crimson">￥{{goods.price/100}}</span></v-subheader>
          <v-subheader>口味</v-subheader>
          <v-chip-group v-model="orderGoods.goodsState" color="#4caf50" mandatory>
            <v-chip label outlined filter
                    :value="state.id"
                    v-for="state in goods.stateList"
                    :key="state.id">{{state.name}}</v-chip>
          </v-chip-group>
          <v-subheader>数量</v-subheader>
          <v-btn icon small color="success" @click="reduce">-</v-btn>{{orderGoods.goodsNum}}
          <v-btn icon small color="success" @click="increase()">+</v-btn>
        </v-card-text>
        <v-card-actions>
          <v-row>
            <v-col cols="5">
              <p style="color: crimson">总计:￥{{orderGoods.totalPrice}}</p>
            </v-col>
            <v-spacer/>
            <v-col cols="5">
              <v-btn color="#4caf50" style="color: black" block @click="addShoppingCart">加入购物车</v-btn>
            </v-col>
          </v-row>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <br/>
  </div>
</template>

<script>
export default {
  name: "GoodsPage",
  props:{
    goodsCategoryList:{
      type:Array,
      default:()=>[]
    }
  },
  data:()=>({
    id:'id1',
    dialog:false,
    a:'',
    goods:{
      name:null,
      image:null,
      details:null,
      price:0,
      stateList:[]
    },
    orderGoods:{
      goodsId:null,
      goodsName:null,
      goodsNum:0,
      goodsState:null,
      totalPrice:0
    },
    defaultOrderGoods:{
      goodsId:null,
      goodsName:null,
      goodsNum:0,
      goodsState:null,
      totalPrice:0
    }
  }),
  computed:{
    goodsNum(){
      return this.orderGoods.goodsNum;
    }
  },
  watch:{
    goodsNum(){
      this.orderGoods.totalPrice = this.goods.price * this.orderGoods.goodsNum / 100;
    }
  },
  methods:{
    goTo(id){
      this.$vuetify.goTo('#goodsCategory'+id);
    },

    openSpecificationDialog(goods){
      this.orderGoods = JSON.parse(JSON.stringify(this.defaultOrderGoods));
      this.dialog=true;
      this.goods = goods;
    },
    increase(){
      if (this.orderGoods.goodsNum<100){
        this.orderGoods.goodsNum++;
      }
    },
    reduce(){
      if (this.orderGoods.goodsNum>0){
        this.orderGoods.goodsNum--;
      }
    },
    addShoppingCart(){
      this.dialog = false;
      if (this.orderGoods.goodsNum===0){
        return;
      }
      this.orderGoods.goodsName = this.goods.name;
      this.orderGoods.goodsId = this.goods.id;
      this.orderGoods.image = this.goods.image
      this.orderGoods.price = this.goods.price
      this.$emit("addShoppingCart",this.orderGoods);
    }
  }
}
</script>

<style scoped>

</style>